<template>
	<div>

		<div class="operatBtnWrapper">
        <button class="operatBtn marR5" @click.stop="routerToAddDepart">新增部门</button>
        <!-- <button class="operatBtn" v-if="hideDeparts.length > 0" @click.stop="showDeparts">显示部门</button> -->
		</div>
		<!-- <div class="tableWrapper paddLR20 minWid1366"> -->
		<div class="tableWrapper1 paddLR20 minWid1366">
            <el-row class="rowClass borderT1">
                <!-- <el-col :span="2">
                  <p class="paddTB10 theader borderL1">
                    序号
                  </p>
                </el-col> -->
                <el-col :span="7">
                  <p class="paddTB10 borderL1 theader">
                    部门名称
                    <span class="tableCaretWrapper" v-if="tableShowDeparts.length > 0">
                        <i class="tableSortCaret tableAscending" @click.stop="sortAsc" :class="{ tableAscendingActive: sortStatus === 1 }"></i>
                        <i class="tableSortCaret tableDescending" @click.stop="sortDesc" :class="{ tableDescendingActive: sortStatus === 2 }"></i>
                    </span>
                  </p>
                </el-col>
                <el-col :span="7">
                  <p class="paddTB10 borderL1 theader">
                    部门人数
                    <span class="tableCaretWrapper" v-if="tableShowDeparts.length > 0">
                        <i class="tableSortCaret tableAscending" @click.stop="sortAscByPeopleNo" :class="{ tableAscendingActive: sortPerNumStatus === 1 }"></i>
                        <i class="tableSortCaret tableDescending" @click.stop="sortDescByPeopleNo" :class="{ tableDescendingActive: sortPerNumStatus === 2 }"></i>
                    </span>
                  </p>
                </el-col>
                <el-col :span="10">
                  <p class="paddTB10 borderL1 theader borderR1">操作</p>
                </el-col>
            </el-row>
            <template v-if="tableShowDeparts">
                <div v-for="(item,index) of tableShowDeparts" :key="item.id" :index="index"> 
                    <el-row class="rowClass">
                    <!-- <el-col :span="2">
                        <p class="paddTB10 tContent borderL1">{{index + 1}}</p>
                    </el-col> -->
                    <el-col :span="7">
                        <p class="paddTB10 borderL1 tContent">{{item.depart_name}}</p>
                    </el-col>
                    <el-col :span="7">
                        <p class="paddTB10 borderL1 tContent">{{item.userLen}}</p>
                    </el-col>
                    <el-col :span="10">
                        <!-- 部门如果没有人且没有在使用中，可以操作 -->
                        <div class="paddTB10 borderL1 tContent borderR1" v-if = "item.userLen === 0 && item.alwaysDepartUsedCount === 0 && item.isNoticeUsed == 0">
                            <span title="修改" class="marR15"><icon name="change" class="scaleIcon1" title="修改" @click.native.stop="editDepart(item.id,item.depart_name)"></icon></span>
                            <!-- <icon name="del" class="scaleIcon1 marR15" @click.native.stop="deleteDepart(item.id,index)" v-if="!item.userLen"></icon>
                            <icon name="delDisabled" class="scaleIcon1 marR15" v-else></icon> -->
                            <!-- <icon name="hide" class="scaleIcon1" title="隐藏部门" @click.native.stop="hideDepart(item,index)" v-if="item.is_show === 1"></icon> -->
                            <span title="删除部门"><icon name="del" class="scaleIcon1" title="删除部门" @click.native.stop="deleteDepart(item.id,index)"></icon></span>
                            <!-- <icon name="hideDisabled" class="scaleIcon1" title="显示部门" @click.native.stop="showDepart(item,index)" v-else-if="item.is_show === 2"></icon> -->
                        </div>
                        <div class="paddTB10 borderL1 tContent borderR1" v-else>
                            /
                        </div>
                    </el-col>
                </el-row>
                </div>
            </template>
            <div v-if="tableShowDeparts.length <= 0" class="tipNoData">暂无部门数据</div>
    </div>

    <!-- <el-dialog
      :visible.sync="centerDialogVisible"
      width="400px"
      @closed="clearData"
      center>

      <div class="turnIconWrapper">
        <span class="turnLeftIcon turnCommIcon" @click.stop="turnPrevPage" >&lt;</span>
        <span  class="turnRightIcon turnCommIcon" @click.stop="turnNextPage">&gt;</span>
    </div>
    <div class="clearfix"></div>
      <div class="tableChoice">
        <div v-for="(item,index) of pageDeparts" :index="index" :key="item.id" class="widPer20 hideDepart" @click.stop="selShowDepart(item)" :class="{hideDepartActive:waitForShowIds.indexOf(item.id) > -1 }">
          {{item.depart_name}}
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click.stop="updateDepartStatus">确 定</el-button>
      </span>
    </el-dialog> -->

	</div>
</template>

<script>
  import http from '../../../../assets/js/http'
  import _g from '@/assets/js/global'
  import { getPageData} from "@/assets/js/common.js"


  export default {
    data() {
      return {
        tableShowDeparts: [],              //  显示的部门
        // hideDeparts:[],                         //  隐藏的部门
        // pageDeparts:[],                       //分页部门集合
        // waitForShowDeparts:[],          //  待显示的部门
        // waitForShowIds:[],                //待显示的部门id集合
        sortStatus:1,                           //  1升序(默认)，2降序
        sortPerNumStatus:1,             //  1升序(默认)，2降序
        // isShowTurnIcon:true,            //  默认显示翻页键头(true),true不显示翻页键头
        centerDialogVisible:false,


        // page:{                                        
        //     pageCount:10,                 //  每页显示10个
        //     totalPageCount:1,                 //  总页数
        //     currPageNum:1,                    //  当前页码    
        // },                          

        // multipleSelection: []
      }
    },
    methods: {
    /* 删除部门 */
    deleteDepart(id,index){
        const that = this
        // const userId = Cookies.get('userId')
        let tableShowDeparts =  that.tableShowDeparts   //  已显示的部门
        that.$confirm('是否确认删除部门?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                  center: true
              }).then(() => {
                    _g.showLoading('删除中')
                    that.apiPost('/admin/AddDepart/delete', {id}).then((res) => {
                        _g.showLoading().close()
                        if(typeof res === 'string'){
                            res = JSON.parse(res)
                        }
                        if (res.code != 200) {
                            that.handleError(res)
                        } else {
                            if(res.data.isSuccess === 0){
                                _g.toastMsg("success", res.message)
                                tableShowDeparts.splice(index,1)                     // 从显示部门数组中移除   
                                that.tableShowDeparts = tableShowDeparts
                            }else if(res.data.isSuccess === 1){
                                _g.toastMsg("error", res.message)
                            }
                            // else if(res.data.isSuccess === 2){
                            //     _g.toastMsg("warning", res.message)
                            // }
                        }
                })
              }).catch(() => {})
    },
    /* 隐藏部门 */
    // hideDepart(depart,index){
    //     const that = this
    //     // let hideDeparts = that.hideDeparts                          //  所有隐藏的部门
    //     let tableShowDeparts =  that.tableShowDeparts   //  所有部门
    //     that.$confirm('是否确认隐藏部门?', '提示', {
    //               confirmButtonText: '确定',
    //               cancelButtonText: '取消',
    //               type: 'warning',
    //               center: true
    //           }).then(() => {
    //                 _g.showLoading('隐藏中')
    //                 that.apiPost('/admin/AddDepart/hide', {id:depart.id}).then((res) => {
    //                     _g.showLoading().close()
    //                     if(typeof res === 'string'){
    //                         res = JSON.parse(res)
    //                     }
    //                     if (res.code != 200) {
    //                         that.handleError(res)
    //                     } else {
    //                         if(res.data.isSuccess === 0){
    //                             _g.toastMsg("success", res.message)
    //                             // hideDeparts.push(depart)                 //  追加隐藏部门
    //                             // tableShowDeparts.splice(index,1)                     // 从显示部门数组中移除   
    //                             tableShowDeparts[index].is_show = 2                     // 部门状态为隐藏

    //                             // that.hideDeparts = hideDeparts
    //                             that.tableShowDeparts = tableShowDeparts
    //                         }else if(res.data.isSuccess === 1){
    //                             _g.toastMsg("error", res.message)
    //                         }
    //                     }
    //             })
    //           }).catch(() => {})
    // },
    /* 显示部门 */
    // showDepart(depart,index){
    //     const that = this
    //     let tableShowDeparts =  that.tableShowDeparts   //  所有部门
    //     that.$confirm('是否确认显示部门?', '提示', {
    //               confirmButtonText: '确定',
    //               cancelButtonText: '取消',
    //               type: 'warning',
    //               center: true
    //           }).then(() => {
    //                 _g.showLoading('显示中')
    //                 that.apiPost('/admin/AddDepart/show', {id:depart.id}).then((res) => {
    //                     _g.showLoading().close()
    //                     if(typeof res === 'string'){
    //                         res = JSON.parse(res)
    //                     }
    //                     if (res.code != 200) {
    //                         that.handleError(res)
    //                     } else {
    //                         if(res.data.isSuccess === 0){
    //                             _g.toastMsg("success", res.message)
    //                             tableShowDeparts[index].is_show = 1                    // 部门状态为显示

    //                             that.tableShowDeparts = tableShowDeparts
    //                         }else if(res.data.isSuccess === 1){
    //                             _g.toastMsg("error", res.message)
    //                         }
    //                     }
    //             })
    //           }).catch(() => {})
    // },
      /* 编辑部门 */
    editDepart(id,departName){
        
        this.$router.push({ path: '/admin/structures/edit', query: { id, departName}})

    },
    /* 更新部门状态为显示 */
    // updateDepartStatus(){
    //     const that = this
    //     let waitForShowIds = that.waitForShowIds        //  待显示的部门id集合
    //     let waitForShowDeparts = that.waitForShowDeparts    //  待显示的部门集合
    //     let hideDeparts = that.hideDeparts                          //  所有隐藏的部门
    //     let tableShowDeparts =  that.tableShowDeparts   //  已显示的部门
    //     let data = {                                                                 //..待显示的部门id集合字符串
    //         ids:'',
    //         // userId:Cookies.get('userId')
    //     }                                                               
    //     if(waitForShowIds.length <= 0){                                                        //  如果没有选择
    //         _g.toastMsg('warning','尚未选择要显示的部门')
    //         return
    //     }else{
    //          that.$confirm('是否确认显示部门?', '提示', {
    //               confirmButtonText: '确定',
    //               cancelButtonText: '取消',
    //               type: 'warning',
    //               center: true
    //           }).then(() => {
    //                data.ids = waitForShowIds.join(',')
    //                 _g.showLoading('提交中')
    //                 that.apiPost('/admin/AddDepart/updateDepartStatus', data).then((res) => {
    //                     _g.showLoading().close()
    //                     if(typeof res === 'string'){
    //                         res = JSON.parse(res)
    //                     }
    //                     if (res.code != 200) {
    //                         that.handleError(res)
    //                     } else {
    //                     if(res.data.isSuccess === 0){             //  成功
    //                         _g.toastMsg("success", res.message)
    //                          // 一下是成功的条件下
    //                         that.centerDialogVisible = false                                                                    //  关闭弹窗
    //                         for (let i = 0; i < hideDeparts.length; i++) {                                                          //  更新隐藏部门
    //                             for(let j = 0;j < waitForShowIds.length;j++){
    //                                 if (hideDeparts[i].id === waitForShowIds[j]) {
    //                                     hideDeparts.splice(i,1)                                                                     //  删除显示元素
    //                                 }
    //                             }
    //                         }
    //                         that.hideDeparts = hideDeparts

    //                         tableShowDeparts = [].concat(tableShowDeparts,waitForShowDeparts)     
                            

    //                         that.tableShowDeparts =  tableShowDeparts  
    //                         if(that.sortStatus === 2){                                          //  如果当前状态为升序，则升排序
    //                             that.sortAsc()  
    //                         }else if(that.sortStatus === 1){                                    //  如果当前状态为降序，则降排序
    //                             that.sortDesc() 
    //                         }
    //                     }else{
    //                         _g.toastMsg("error", res.message)
    //                     }
    //                     }
    //             })
    //           }).catch(() => {});
    //     }

    // },
    /* 选择需要显示的部门 */
    // selShowDepart(currDepart){
    //     const that = this
    //     let waitForShowIds = that.waitForShowIds        //  待显示的部门id集合
    //     let waitForShowDeparts = that.waitForShowDeparts    //  待显示的部门集合
    //     if(waitForShowIds.indexOf(currDepart.id) > -1){       //  如果已经选择
    //         waitForShowIds = waitForShowIds.filter((id) => id !== currDepart.id)
    //         waitForShowDeparts = waitForShowDeparts.filter((item) => item.id !== currDepart.id)
    //     }else{
    //         waitForShowIds.push(currDepart.id)
    //         waitForShowDeparts.push(currDepart)
    //     }
    //     that.waitForShowIds = waitForShowIds//  待显示的部门id集合
    //     that.waitForShowDeparts = waitForShowDeparts
    // },
      /* 上一页 */
    //   turnPrevPage(){
    //     let startIndex = null	                                        // 开始索引
    //     let endIndex = null                                           //    结束索引     
    //     let currPageNum = this.page.currPageNum     //  当前页
    //     let totalPageCount = this.page.totalPageCount     //  总页数
    //     let pageCount = this.page.pageCount                                 //  每页显示部门个数
    //     let pageDeparts = []                                        //  分页部门集合

    //       if(this.page.currPageNum === 1){
    //         _g.toastMsg("warning", '已经是第一页')
    //       }else{
    //           --currPageNum
    //         startIndex = (currPageNum - 1) * pageCount
    //         if(currPageNum < totalPageCount){
    //             endIndex = currPageNum * pageCount - 1
    //         }else{                                                                              //  如果下一页为最后一页
    //             endIndex = this.hideDeparts.length - 1
    //         }  
    //         pageDeparts = getPageData(startIndex,endIndex,this.hideDeparts)
    //         this.page.currPageNum = currPageNum
    //         this.pageDeparts = pageDeparts
    //       }
    //   },
       /* 下一页 */
    //    turnNextPage(){
    //     let startIndex = null	                                        // 开始索引
    //     let endIndex = null                                           //    结束索引     
    //     let currPageNum = this.page.currPageNum     //  当前页
    //     let totalPageCount = this.page.totalPageCount     //  总页数
    //     let pageCount = this.page.pageCount                                 //  每页显示部门个数
    //     let pageDeparts = []                                        //  分页部门集合

    //      if(currPageNum === totalPageCount ){
    //         _g.toastMsg("warning", '已经是最后一页')
    //       }else{
    //         ++currPageNum
    //         startIndex = (currPageNum - 1) * pageCount
    //         if(currPageNum < totalPageCount){
    //             endIndex = currPageNum * pageCount - 1
    //         }else{                                                                              //  如果下一页为最后一页
    //             endIndex = this.hideDeparts.length - 1
    //         }  
    //         pageDeparts = getPageData(startIndex,endIndex,this.hideDeparts)
    //         this.page.currPageNum = currPageNum
    //         this.pageDeparts = pageDeparts
    //       }
    //    },
       /*  */
      /* 根据部门名字升序排序 */
      sortAsc(){
        if(this.sortStatus === 2){              //  如果已经为降序  
          this.sortStatus = 1                       //  升序
           let sortDeparts = this.tableShowDeparts
          sortDeparts.sort(function(obj1,obj2){
            let val1 = obj1.depart_name
            let val2 = obj2.depart_name
            if (val1 < val2) {
                return 1;
            } else if (val1 > val2) {
                return -1;
            } else {
                return 0;
            }         
          });
          this.tableShowDeparts = sortDeparts
        }
      },
      /* 根据部门名字降排序 */
      sortDesc(){
        if(this.sortStatus === 1){                    //  如果已经为升序
               this.sortStatus = 2                       //  降序
              let sortDeparts = this.tableShowDeparts
              sortDeparts.sort(function(obj1,obj2){
                let val1 = obj1.depart_name
                let val2 = obj2.depart_name
                if (val1 < val2) {
                    return -1;
                } else if (val1 > val2) {
                    return 1;
                } else {
                    return 0;
                }   
              });
              this.tableShowDeparts = sortDeparts
        }
      },
      /* 根据部门人员数量升序排序 */
      sortAscByPeopleNo(){
        if(this.sortPerNumStatus === 2){              //  如果已经为降序  
          this.sortPerNumStatus = 1                       //  升序
           let sortDeparts = this.tableShowDeparts
          sortDeparts.sort(function(obj1,obj2){
            let val1 = obj1.userLen
            let val2 = obj2.userLen
            if (val1 < val2) {
                return 1;
            } else if (val1 > val2) {
                return -1;
            } else {
                return 0;
            }         
          });
          this.tableShowDeparts = sortDeparts
        }
      },
      /* 根据部门人员数量降排序 */
      sortDescByPeopleNo(){
        if(this.sortPerNumStatus === 1){                    //  如果已经为升序
               this.sortPerNumStatus = 2                       //  降序
              let sortDeparts = this.tableShowDeparts
              sortDeparts.sort(function(obj1,obj2){
                let val1 = obj1.userLen
                let val2 = obj2.userLen
                if (val1 < val2) {
                    return -1;
                } else if (val1 > val2) {
                    return 1;
                } else {
                    return 0;
                }   
              });
              this.tableShowDeparts = sortDeparts
        }
      },
      /* 弹框初始化数据 */
    //   clearData(){
    //       this.pageDeparts=[]                       //分页部门集合
    //     this.waitForShowDeparts=[]          //  待显示的部门
    //     this.waitForShowIds=[]              //待显示的部门id集合
    //     // this.isShowTurnIcon = true            //  默认显示翻页键头(true),true不显示翻页键头
    //     this.page = {                                        
    //         pageCount:10,                 //  每页显示10个
    //         totalPageCount:1,                 //  总页数
    //         currPageNum:1                    //  当前页码    
    //     }
    //   },
      
      /* 显示部门 */
    //   showDeparts(){
    //     const that = this
 
    //     let hideDeparts = that.hideDeparts

    //     let pageDeparts = [];                 //  分页部门集合       
    //     let totalPageCount = 1;           //  总页数

    //     let startIndex = 0;                 //  开始索引
    //     let endIndex = 9;              //  结束索引

    //     that.centerDialogVisible = true
        
    //     if(hideDeparts){                                //  如果存在隐藏部门
    //       totalPageCount = Math.ceil(hideDeparts.length / that.page.pageCount)   //  总页数
    //       that.page.totalPageCount = totalPageCount
    //       if(totalPageCount === 1){                           //  如果只有1页
    //           that.pageDeparts = hideDeparts
    //       }else{                                                              //  取第1页数据
    //         pageDeparts = getPageData(startIndex,endIndex,hideDeparts)
    //         that.pageDeparts = pageDeparts
    //       }
    //     }

    //   },
      /* 跳转到新增部门页面 */
      routerToAddDepart(){
        this.$router.push('/admin/structures/addDepart')
      },

      /* 获取部门列表 */
      getDepartList(){

            const that = this
            let tableShowDeparts = []           //  显示的部门            
            let hideDeparts = []                    //    隐藏的部门  
            let totalDepartList = []              //  所有部门 
            // const userId = Cookies.get('userId')
            _g.showLoading('加载中');
            this.apiPost("admin/addDepart").then(res => {
                    _g.showLoading().close()
                    if(typeof res === 'string'){
                      res = JSON.parse(res)
                    }
                    if (res.code != 200) {
                      this.handleError(res)
                    } else {
                        // if(res.data.isSuccess === 100){
                        //     _g.toastMsg("error", res.message)
                        //     that.$router.push('/')
                        // }
                        // totalDepartList = res.data.departList
                        // if(totalDepartList.length > 0){             //  如果有部门
                        //     for(let item of res.data.departList){
                        //       if(item.is_show === 1){                 //  如果部门显示
                        //           tableShowDeparts.push(item)
                        //       }else if(item.is_show === 2){        //   如果部门隐藏
                        //           hideDeparts.push(item)
                        //       }
                        //     }
                        //     that.tableShowDeparts = tableShowDeparts || []
                        //     // that.hideDeparts = hideDeparts || []
                        // }
                        that.tableShowDeparts = res.data.departList
                    }
              })
      },

      selectItem(val) {
        this.multipleSelection = val
      },
      confirmDelete(item) {
        this.$confirm('确认删除该部门?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _g.openGlobalLoading()
          this.apiDelete('admin/structures/', item.id).then((res) => {
            _g.closeGlobalLoading()
            this.handelResponse(res, (data) => {
              _g.toastMsg('success', '删除成功')
              setTimeout(() => {
                _g.shallowRefresh(this.$route.name)
              }, 1500)
            })
          })
        }).catch(() => {
          // handle error
        })
      },
      // getStructures() {
      //   this.apiGet('admin/structures').then((res) => {
      //     this.handelResponse(res, (data) => {
      //       this.tableData = data
      //     })
      //   })
      // }
    },
    created() {
      // this.getStructures()
      this.getDepartList()
    },
    computed: {

      addShow() {
        return _g.getHasRule('structures-save')
      },
      editShow() {
        return _g.getHasRule('structures-update')
      },
      deleteShow() {
        return _g.getHasRule('structures-delete')
      }
    },
    components: {
    },
    mixins: [http]
  }
</script>